<template>
	<view>
		<header-top :messageInfo="{typeFlag:true,message:'支付'}"></header-top>
		<view class="bgcolor mainpadding">
			<view class="price flexcenter" style="margin-top: 80rpx;">{{price || "0.00"}}</view>
			<view class="mainpadding_top ffffff radius flexbetween" @click="show = true">
				<input type="text" placeholder="请选择套餐" v-model="tc" disabled="">
				<view style="min-width: 200rpx;text-align: right;">{{tc?"365天":""}}</view>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="flexbetween" @click="changetype(10)">
					<view class="strongtext">微信</view>
					<view :class="pay_type==10?'checkselect':'nocheckselect'">
						<image src="../../static/imags/login/select.png" mode=""></image>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="changetype(20)">
					<view class="strongtext">支付宝</view>
					<view :class="pay_type==20?'checkselect':'nocheckselect'">
						<image src="../../static/imags/login/select.png" mode=""></image>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="changetype(30)">
					<view class="strongtext">银行卡</view>
					<view :class="pay_type==30?'checkselect':'nocheckselect'">
						<image src="../../static/imags/login/select.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="btn flexcenter" style="margin-top: 80rpx;" @click="submit">支付</view>
		</view>
		<!-- 套餐 -->
		<!-- <u-picker :show="tcshow" keyName="name" :columns="tccolumns" title="选择套餐" @confirm="tcconfirm"
			@cancel="tcshow=false"></u-picker> -->
		<u-popup :show="show" mode="bottom" @close="show=false">
			<view class="popupBox">
				<view class="flexbetween title">
					<view @click="show=false">取消</view>
					<view style="color: blue;" @click="tcconfirm">确定</view>
				</view>
				<view style="margin-top: 140rpx;padding-bottom: 100rpx;">
					<view class="itemBox flexcenter" v-for="item in tccolumns" :key="item.id" @click="selecttc(item)">
						<view class="margin_right" :style="{color:item.id==tcInfo.id?'#3476fe':''}">
							{{item.name}}
						</view>
						<view class=""  @click="selecttctwo(item)">
							<u-icon name="arrow-right" size="14" :color="item.id==tcInfo.id?'#3476fe':''"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<template v-if="shareshow">
			<u-popup :show="shareshow" mode="center" :closeOnClickOverlay="false" closeable @close="guanbi"
				round="10">
				<view class="mainpadding_top">
					<view class="titletext margin_top">订单编号：{{pay_data.order_no}}</view>
					<view class="flexcenter" style="margin-top: 30rpx;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="pay_data.expend.qrcode_url"
							:options="{ margin: 10}">
						</uqrcode>
					</view>
					<view class="margin_top">姓名：{{customer_detail.khname}}</view>
					<view class="margin_top">套餐：{{tcInfo.name}}</view>
					<view class="flexcenter margin_top">
						<view class="savebtn" @click="saveimg">保存图片</view>
					</view>
				</view>
			</u-popup>
		</template>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shareshow: false,
				show: false,
				// 套餐
				tc: "",
				tcshow: false,
				tccolumns: [],
				customer_detail: {}, //客户信息
				tcid: "",
				price: "",
				pay_type: 10, //支付方式:10=微信支付,20=支付宝支付,30=银行卡支付
				listid: "",
				tcInfo: {}, //选中的套餐信息
				pay_data: {

				},
				setIntervalPay: null
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getdetail(options.id)
			this.gettc()
		},
		onUnload() {
			clearInterval(this.setIntervalPay)
		},
		methods: {
			guanbi(){
				clearInterval(this.setIntervalPay)
				// this.shareshow = false
				uni.navigateBack(1)
			},
			saveimg() {
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							title: '保存成功'
						});
					}
				});
			},
			getdetail(id) {
				httpRequest.request('/employeesapi/shop/detail', 'POST', {
					id
				}).then(res => {
					this.customer_detail = res.data
				})
			},
			submit() {
				if (this.tcid == "") {
					httpRequest.toast("请选择套餐")
					return false
				}
				if (this.pay_type == 10) {
					this.scanbarCode()
					return false
				}
				httpRequest.request('/employeesapi/shop/addThaliOrder', 'POST', {
					thali_id: this.tcid,
					pay_type: this.pay_type,
					shop_id: this.listid
				}).then(res => {
					if (res.code == 1) {
						this.pay_data = res.data
						this.shareshow = true
						this.setIntervalPay = setInterval(() => {
							this.getpaytype(res.data.query_url) //获取支付宝的支付状态，是否支付完成
						}, 1000)
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			scanbarCode() {
				let that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						that.chuangjiandd(res.result)
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			chuangjiandd(val) {
				httpRequest.request('/employeesapi/shop/addThaliOrder', 'POST', {
					thali_id: this.tcid,
					pay_type: this.pay_type,
					shop_id: this.listid,
					auth_code: val
				}).then(res => {
					if (res.code == 1) {
						this.setIntervalPay = setInterval(() => {
							this.getpaytype(res.data.query_url) //获取微信用户的支付状态，是否支付完成
						}, 1000)
					}
				})
			},
			getpaytype(url) {
				uni.request({
					url: url,
					data: {},
					method: "GET", //'GET','POST'
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "获取支付信息获取支付信息");
						if(res.data.status=="succeeded"){//支付成功
							httpRequest.toast("客户支付成功")
							clearInterval(this.setIntervalPay)
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
					},
					fail: (res) => {
					}
				})
			},
			changetype(value) {
				this.pay_type = value
			},
			// 获取套餐
			gettc() {
				httpRequest.request('/employeesapi/index/getthali', 'POST', {}).then(res => {
					// this.tccolumns.push(res.data)
					this.tccolumns = res.data
				})
			},
			selecttc(item) {
				this.tcInfo = item
			},
			selecttctwo(item){
				this.tcInfo = item
				uni.navigateTo({
					url: "./tancanxq?id=" + item.id
				})
			},
			// 套餐确认
			tcconfirm() {
				this.show = false
				this.tcid = this.tcInfo.id
				this.tc = this.tcInfo.name
				this.price = this.tcInfo.price
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupBox {
		height: 700rpx;
		padding: 0 30rpx 50rpx;
		box-sizing: border-box;
		overflow-y: auto;

		.title {
			width: 100%;
			padding: 30rpx;
			position: fixed;
			box-sizing: border-box;
			left: 50%;
			z-index: 999;
			transform: translateX(-50%);
			bottom: 605rpx;
			background-color: #fafafa;
		}

		.itemBox {
			text-align: center;
			padding: 30rpx;
		}

		.itemBox:hover {
			background-color: #fafafa;
			color: #3476fe;
		}

	}

	.savebtn {
		width: 300rpx;
		padding: 20rpx 0;
		text-align: center;
		background-color: #3476fe;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
	}

	.price {
		font-size: 90rpx;
		color: #3476fe;
		font-weight: bold;
	}

	.nocheckselect {
		background-color: #fff;
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
		border: 1rpx solid #3476fe;
		image {
			width: 21rpx;
			height: 14rpx;
			margin-bottom: 18rpx;
			margin-left: 2rpx;
		}
	}

	.checkselect {
		background-color: #3476fe;
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
		border: 1rpx solid #3476fe;
		image {
			width: 21rpx;
			height: 14rpx;
			margin-bottom: 18rpx;
			margin-left: 2rpx;
		}
	}
</style>